<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小黑消费账单</title>
  <style>
    .left {
      width: 780px;
      height: auto;
      float: left;
      margin-right: 20px;
    }

    .right {
      width: 530px;
      height: auto;
      border: 1px solid rgb(147, 144, 144);
      display: inline;
      float: right;
      position: absolute;
    }

    input {
      height: 20px;
      width: 240px;
      margin: 20px;
    }

    .leftTop>button {
      background-color: rgb(75, 120, 255);
      font-size: 14px;
      width: 80px;
      height: 25px;
      margin-left: 15px;
      border-radius: 5px;
      border: none;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      padding-bottom: 2px;
      font-size: large;
      font-weight: bolder;
    }

    .listBody .lists {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      padding-bottom: 2px;
      border-bottom: 1px solid #e6e6e6;
    }

    .listBody a {
      color: #007bff;
      text-decoration: none;
      cursor: pointer;
    }

    .listBody a:hover {
      text-decoration: underline;
    }

    .footer {
      height: 28px;
      margin-left: 10px;
      font-size: large;
      font-weight: bolder;
    }

    .rightLef {
      float: left;
      width: 140px;
      height: 300px;
      border: 1px solid black;
      position: absolute;
    }

    .rightRight {
      float: right;
      width: 390px;
      height: 300px;
      border: 1px solid black;
    }

    h2 {
      text-align: center;
    }

    .descriptrBox {
      margin-left: 20px;
      margin-top: 30px;
    }

    .colorBox {
      display: inline-block;
      border: 1px solid rgb(137, 135, 135);
      width: 18px;
      height: 10px;
    }

    .bin {
      height: 300px;
      width: 500px;
      margin: auto;
      /* border: 1px solid black; */
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- 左侧 -->
    <div class="left">
      <!-- 左上 -->
      <div class="leftTop">
        <input type="text" placeholder="消费名称" v-model.trim="cname">
        <input type="text" placeholder="消费价格" v-model.number="cprice">
        <button @click="add">添加账单</button>
      </div>

      <!-- 左下 -->
      <!-- 头标 -->
      <div class="header">
        <span>编号</span>
        <span>消费名称</span>
        <span>消费价格</span>
        <span>操作</span>
      </div>
      <hr>

      <!-- 中间体 -->
      <div class="listBody">
        <div class="lists" v-for="(item,index) in consumeList" :key="item.id">
          <span>{{index+1}}</span>
          <span>{{item.name}}</span>
          <span :style="{color:item.price >=500?'red':''}">{{parseFloat(item.price).toFixed(2)}}</span>
          <span>
            <a @click="del(item.id)">删除</a>
          </span>
        </div>
        <hr>
      </div>

      <!-- 底部 -->
      <div class="footer">消费总计：{{parseFloat(totalMoney).toFixed(2)}}</div>

    </div>


    <!-- 右侧 -->
    <div class="right">
      <!-- 饼状图 -->
      <div class="bin"></div>

    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        cname: '',
        cprice: '',
        consumeList: []
      },
      //初始化界面
      async created() {
        this.getConsumeList()

      },

      methods: {
        //获取数据
        async getConsumeList() {
          const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
            params: {
              creator: '小黑'
            },

          })
          this.consumeList = res.data.data

          //更新图表
          this.myChart.setOption({
            //数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '60%', //半径
                data: this.consumeList.map(item => ({ value: item.price, name: item.name })),
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                  }
                }
              }
            ]
          })
        },

        //添加
        async add() {
          if (!this.cname) {
            alert('请输入消费名称')
            return
          }
          if (typeof this.cprice !== 'number') {
            alert('请输入正确的消费价格')
            return
          }
          const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
            creator: '小黑',
            name: this.cname,
            price: this.cprice
          })
          //重新渲染
          this.getConsumeList()
          //清空
          this.cprice = ''
          this.cname = ''
        },

        //删除
        async del(id) {
          const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
          this.getConsumeList()
        },
      },

      //计算总价
      computed: {
        totalMoney() {
          return this.consumeList.reduce((prev, item) => prev + item.price, 0)
        }
      },

      //饼状图渲染
      mounted() {
        this.myChart = echarts.init(document.querySelector('.bin'))
        this.myChart.setOption({
          //大标题
          title: {
            text: '小黑消费清单',
            left: 'center'
          },
          //提示框
          tooltip: {

          },
          //图例
          legend: {
            orient: 'vertical',//垂直
            x: '20px',
            y: '10px'
          },


        })
      }
    })
  </script>

</body>

</html>